<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://netdna.jboxcdn.com/0.2.3/jBox.min.js"></script>
<link href="http://netdna.jboxcdn.com/0.2.3/jBox.css" rel="stylesheet">
<script>
$(function(){
	
	
$('.tooltip').jBox('Tooltip');	
	
new jBox('Modal', {
    width: 300,
    height: 200,
    attach: $('#myModal'),
    title: 'My Modal Window',
    content: '<i>Hello there!</i>'
});


$('#myNotice').click(function() {
		new jBox('Notice', {
			position: {
				y: 65,
				x: 15
			},
			 title: 'My title',
			content: 'Hurray! A notice!<br>dafdfasfsdafsdf',
			width:500
		}).audio({url: 'audio/beep1', volume: 75});
	});	
	
})

</script>
</head>

<body>

 
<span class="tooltip" title="My first tooltip">Hover me!</span>
<span class="tooltip" title="My second tooltip">Hover me!</span>



 
<div id="myModal">Click me to open a modal window!</div>

<div style="cursor: pointer" id="myNotice">Click me to show a notice!</div>



<script>
$(document).ready(function() {
	new jBox('Image')
});
</script>

<div class="demo clearfix">
<a href="http://stephanwagner.me/img/jBox/demo-img/CIMG4778_large.jpg" data-jbox-image="gallery1" title="Navigate with your keyboard: Press the [right] or [left] key!" class="demo-img demo-img-gallery1" style="background-image: url(/img/jBox/demo-img/CIMG4778_grayscale.jpg)"><img src="http://stephanwagner.me/img/jBox/demo-img/CIMG4778_small.jpg" alt=""></a>
<a href="http://stephanwagner.me/img/jBox/demo-img/CIMG4547_large.jpg" data-jbox-image="gallery1" title="jBox is smart! The next image gets preloaded" class="demo-img demo-img-gallery1" style="background-image: url(/img/jBox/demo-img/CIMG4547_grayscale.jpg)"><img src="http://stephanwagner.me/img/jBox/demo-img/CIMG4547_small.jpg" alt=""></a>
<a href="http://stephanwagner.me/img/jBox/demo-img/CIMG6771_large.jpg" data-jbox-image="gallery1" title="Simpson Desert – Australia" class="demo-img demo-img-gallery1" style="background-image: url(/img/jBox/demo-img/CIMG6771_grayscale.jpg)"><img src="http://stephanwagner.me/img/jBox/demo-img/CIMG6771_small.jpg" alt=""></a>
</div>
<script>
$(document).ready(function() {
$('#myModal2').jBox('Modal', {animation: 'flip'});
})
</script>
<div id="myModal2">Click me   </div>



</body>
</html>